<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- <video
      width="500"
      src="https://www.runoob.com/try/demo_source/movie.mp4"
      muted
      loop
      controls
      poster="../04/border.png"
    ></video> -->

    <!-- <video
      width="500"
      src="https://www.runoob.com/try/demo_source/movie.mp4"
      muted
      loop
      controls
      preload="metadata"
    ></video> -->

    <video controls width="320" height="240">
      <source
        src="https://www.runoob.com/try/demo_source/movie.mp4"
        type="video/mp4"
      />
      <track
    default
      srclang="en" src="./en.vtt"></track> 
      <track
    default
      srclang="zh" src="./zh.vtt"></track> 
    </video>

    <audio
      src="https://www.runoob.com/try/demo_source/horse.ogg"
      controls
      loop
    ></audio>

    <!-- 图片常见格式 png jpg(jpeg) gif bmp webp -->
    <!-- mp4 webm -->

    <button class="btn-play">play</button>
    <button class="btn-pause">pause</button>
    <button class="btn-add">+1</button>
    <button class="btn-jian">-1</button>

    <script>
        let s = 1
        let videoDom = document.querySelector('video')

        
        document.querySelector('.btn-play').onclick = function () {
            videoDom.play()
        }

        document.querySelector('.btn-pause').onclick = function () {
            document.querySelector('video').pause()
        }

        console.log('videoDom.autoplay',videoDom.autoplay);
        console.log('videoDom.buffered',videoDom.buffered);
        console.log('videoDom.controller',videoDom.controller);
        



        // 时长变化
        videoDom.ondurationchange = function () {
            console.log('videoDom.currentSrc',videoDom.currentSrc);
        }

        // 播放时间变化
        videoDom.ontimeupdate = function () {
            // 当前播放时间
            // console.log('videoDom.currentTime',videoDom.currentTime);
            // console.log('videoDom.duration',videoDom.duration);
            // console.log('videoDom.paused',videoDom.paused);
            
            
            
        }

        document.querySelector('.btn-add').onclick= function () {
            videoDom.playbackRate = 2
        }
        document.querySelector('.btn-jian').onclick= function () {
            videoDom.playbackRate = 0.5
        }
        // setInterval(() => {
        //     // console.log('videoDom.buffered',videoDom.buffered);
        //     console.log("==================");
        //     for (let i = 0; i < videoDom.buffered.length; i++) {
        //         console.log(videoDom.buffered.start(i), videoDom.buffered.end(i));
                
        //     }

        //     // console.log('videoDom.buffered',videoDom.buffered.start(1));
        //     // console.log('videoDom.buffered',videoDom.buffered.end(1));
            
        // }, 1000);


        videoDom.onended  = function () {
            console.log('end');
        }
        videoDom.onpause = function () {
            console.log('暂停');
        }
        videoDom.onplay = function () {
            console.log('bofang');
        }

        videoDom.onratechange = function () {
            console.log(videoDom.playbackRate);
        }

//         loadstart
// durationchange
// loadedmetadata
// loadeddata
// progress
// canplay


// https://www.17sucai.com/pins/demo-show?id=30957
// https://www.17sucai.com/pins/30991.html
        

// https://www.17sucai.com/pins/36157.html
    </script>


<div class="box">box</div>
<style>
    /* box-shadow: h-shadow 水平偏移 v-shadow 垂直偏移 blur 模糊 spread 大小 color inset; */
    .box {
        width: 200px;
        height: 200px;
        border: 1px solid red;
        margin: 50px;
        box-shadow: 10px 10px 20px 0 rgba(0, 0, 0, 0.3)  inset;
        /* box-shadow: 10px 10px 10px 0 blue inset ; */
        /* box-shadow: 10px 10px 10px 20px blue ; */
        /* box-shadow: 0 0 0 0 blue ; */
    }
</style>
  </body>
</html>
